<template>
  <div class="div-progress-bars">
    <div v-for="(item, index) in progressData" :key="index" class="div-progress-bar">
      <div class="progress-container" :style="{ width: showText ? '80%' : '100%' }">
        <!-- 背景条 -->
        <div class="progress-bg"></div>
        <!-- 进度条 -->
        <div ref="progressFillRefs" class="progress-fill" :style="{
          background: getGradient(item.gradientColors || gradientColors)
        }"></div>
        <!-- 高光效果 -->
        <div ref="highlightRefs" class="progress-highlight"></div>
      </div>
      <div v-if="showText" class="progress-text">
        <span class="label" :title="item.label">{{ item.label }}{{ item.percentage }}%</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from 'vue'

const props = defineProps({
  // 进度条数据数组
  progressData: {
    type: Array,
    default: () => []
  },
  // 是否显示文字
  showText: {
    type: Boolean,
    default: true
  },
  // 默认渐变色配置
  gradientColors: {
    type: Array,
    default: () => ['#00B85C', '#00D4AA']
  },
  // 默认背景色
  backgroundColor: {
    type: String,
    default: 'rgba(255, 255, 255, 0.7)'
  },
  // 圆角半径
  borderRadius: {
    type: Number,
    default: 10
  },
  // 动画持续时间
  animationDuration: {
    type: Number,
    default: 700
  }
})

// 创建ref引用数组
const progressFillRefs = ref([])
const highlightRefs = ref([])

// 生成渐变CSS
const getGradient = (colors) => {
  if (colors.length === 1) return colors[0]
  return `linear-gradient(90deg, ${colors.join(', ')})`
}

// 组件挂载后启动动画
onMounted(async () => {
  // 等待DOM更新完成
  await nextTick()

  // 延迟启动动画，确保DOM渲染完成
  setTimeout(() => {
    progressFillRefs.value.forEach((fill, index) => {
      const highlight = highlightRefs.value[index]
      const item = props.progressData[index]

      if (fill && highlight && item) {
        // 设置过渡动画
        fill.style.transition = `width ${props.animationDuration}ms cubic-bezier(0.25, 0.46, 0.45, 0.94)`
        highlight.style.transition = `width ${props.animationDuration}ms cubic-bezier(0.25, 0.46, 0.45, 0.94)`

        // 设置初始宽度为0
        fill.style.width = '0%'
        highlight.style.width = '0%'

        // 错开启动动画
        setTimeout(() => {
          fill.style.width = item.percentage + '%'
          highlight.style.width = item.percentage + '%'
        }, index * 200)
      }
    })
  }, 100)
})

// 监听进度数据变化
watch(() => props.progressData, async (newData) => {
  // 等待DOM更新完成
  await nextTick()

  // 重新启动动画
  setTimeout(() => {
    progressFillRefs.value.forEach((fill, index) => {
      const highlight = highlightRefs.value[index]
      if (fill && highlight && newData[index]) {
        // 重置为0%然后动画到目标值
        fill.style.width = '0%'
        highlight.style.width = '0%'

        setTimeout(() => {
          fill.style.width = newData[index].percentage + '%'
          highlight.style.width = newData[index].percentage + '%'
        }, 50)
      }
    })
  }, 100)
}, { deep: true })
</script>

<style scoped lang="scss">
.div-progress-bars {
  display: flex;
  flex-direction: column;

  .div-progress-bar {
    display: flex;
    align-items: center;
    gap: 20px;

    .progress-container {
      height: 12px;
      position: relative;
      border-radius: v-bind('borderRadius + "px"');
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

      .progress-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(41, 40, 40, 0.13);
        border-radius: inherit;
      }

      .progress-fill {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        border-radius: inherit;
        transition: width 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }

      .progress-highlight {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 0%; // 初始宽度为0，通过动画展开
        background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.3) 0%,
            rgba(255, 255, 255, 0.1) 50%,
            transparent 100%);
        border-radius: inherit;
        transition: width 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        pointer-events: none;
      }
    }

    .progress-text {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      min-width: 80px;

      .label {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 13px;
        color: #525A66;
        white-space: nowrap;
        margin-bottom: 4px;
      }

      .percentage {
        font-size: 18px;
        font-weight: 700;
        color: #00B85C;
        font-family: 'Courier New', monospace;
        white-space: nowrap;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .div-progress-bars {
    .div-progress-bar {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;

      .progress-text {
        align-items: flex-start;
        width: 100%;
      }
    }
  }
}
</style>
